<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
  <meta name="keywords" content="loadKMLFile,onKMLParsed" />
  <title>HERE Maps API Example: Loading a KML file: Largest Cities in Finland</title>
  <!-- Set up constants such as APP ID and token -->
  <script type="text/javascript" src="../libs/hereAppIdAndToken.js"></script>
  <!-- Bootstrap jQuery Library -->
  <script type="text/javascript" src="../libs/jQl.min.js"></script>
  <!-- Asynchronously the HERE Maps API for JavaScript -->
  <script type="text/javascript" src="../libs/hereAsyncLoader.js"
    id="HereMapsLoaderScript" 
    data-params="maps,datarendering" 
    data-map-container="mapContainer"
    data-callback="afterHereMapLoad" >
  </script>
  <link rel="icon" href="http://here.com/favicon.ico"/>
  <!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
</head>
<body>
  <h1>Loading a KML File : Largest Cities in Finland</h1>
  <p>This example retrieves a KML file holding the name and population of the
   largest cities in Finland from from the local domain and
  parses the file using the KML parser. The file has been generated using
  the KML generation tool.</p>
  <p>The KML file is located at:
    <a href="./kml/finland.kml">./kml/finland.kml</a>
  </p>
  <div id="mapContainer" style="width:540px; height:334px;"></div>
<script id="example-code" data-categories="kml" type="text/javascript" >
//<![CDATA[
var map,
  infoBubbles,
  container;

function onKMLParsed(kmlManager) {
  var resultSet;
  // KML file was successfully loaded
  if (kmlManager.state === 'finished') {
    // KML file was successfully parsed
    resultSet = new nokia.maps.kml.component.KMLResultSet(kmlManager.kmlDocument, map);
    resultSet.addObserver('state', function (resultSet) {
      if (resultSet.state === 'finished') {
        container = resultSet.container;
        map.objects.add(container);
        map.zoomTo(container.getBoundingBox());
      }
    });
    resultSet.create();
  }
}

function loadKMLFile() {
  var kml = new nokia.maps.kml.Manager();
  // We define a callback function for parsing kml file,
  // and then push the parsing result to map display
  // Add an observer to kml manager
  kml.addObserver('state', onKMLParsed);
  kml.parseKML('./kml/finland.kml');
}

function afterHereMapLoad(theMap) {
  map = theMap;
  infoBubbles = new nokia.maps.map.component.InfoBubbles();
  map.components.add(infoBubbles);
  loadKMLFile(map);
}
//]]>
</script>
<script type="text/javascript" src="../libs/prettyprint.js"></script>
</body>
</html>